<script setup lang="ts">
import { useStore } from '@store/index';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps<{
    musicLislModel: any
    singleMusicModel: any
    singerModel: any
    top: any
    bottom: any
}>();
const BASEURL = useStore().baseUrl
const toUserPage = (userId: string) => {
    router.push({
        name: 'personCenter', params: {
            userId,
            type: 'default'
        }
    })
}
const toListPage = (listId: string) => {
    router.push({
        name: 'musicList', params: {
            musicListId: listId,
            disableSlide: 0
        }
    })
}
// 去歌手页
const toSingerPage = (id: string) => {
    console.log(12);
    router.push({
        name: 'singer', params: { id }
    })
}
/**
 * 此通用组件在开启musicListModel时 top区每行显示4个image
 * 开启singleMusicModel时 top区每行显示1个image
 */
</script>
<template>
    <div class="container">
        <div class="like" v-if="props.musicLislModel && props.top.length > 0">
            <div class="title">
                <p>喜欢这个歌单的人</p>
            </div>
            <div class="avatar">
                <img @click="toUserPage(user.id)" v-for="user of props.top" :src="BASEURL + '/static/image/' + user.avatar">
            </div>
        </div>
        <div class="like" v-if="props.singerModel == true && props.top">
            <div class="title">
                <p>更多歌手</p>
            </div>
            <div class="singer">
                <div @click="toSingerPage(user.id)" class="singer-avatar" v-for="user of props.top">
                    <img :src="BASEURL + '/static/image/' + user.avatar">
                    <p class="name">{{ user.name }}</p>
                </div>
            </div>

        </div>
        <div class="recommamd" v-if="props.musicLislModel">
            <div class="title">
                <p>推荐歌单</p>
            </div>
            <div class="list" v-for="list of props.bottom">
                <img style="cursor: pointer;" @click="toListPage(list.id)" :src="BASEURL + '/static/image/' + list.image">
                <div class="listInfo">
                    <p class="smallTitle" @click="toListPage(list.id)">
                        {{ list.title }}
                    </p>
                </div>

            </div>
        </div>
    </div>
</template>
<style lang="css" scoped>
.name {
    margin-top: 2px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.singer {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: auto;
    padding-top: 20px;
    justify-content: space-between;
}

.singer-avatar {

    cursor: pointer;
}

.singer-avatar img {
    width: var(--avatar-middle-size);
    height: var(--avatar-middle-size);

}

.recommamd {
    margin-bottom: 20px;
}

.list .smallTitle {
    color: black;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;

}

.smallTitle:hover {
    text-decoration: underline;
}

.creator {
    font-size: 12px;
    margin-top: 5px !important;
}

.list .listInfo {
    overflow: hidden;
    white-space: nowrap;
}

.listInfo p {
    margin: 0;
    color: #666;
}

.listInfo a {
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list .listInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.list {
    display: flex;
    margin-top: 20px;
}

.list img {
    width: var(--music-image-small-size);
    height: var(--music-image-small-size);
    margin-right: 10px;
}

.avatar img:nth-child(-n+4) {
    margin-bottom: 10px;
}

.avatar {
    display: grid;
    grid-template-columns: repeat(4, 35px);
    grid-gap: auto;
    padding-top: 20px;
    justify-content: space-between;
    cursor: pointer;
}

.avatar img {
    width: var(--avatar-small-size);
    height: var(--avatar-small-size);

}

.title {
    margin-top: 30px;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
}

.title p {
    margin: 0;
    margin-bottom: 8px;
    font-weight: 600;
}

.container {
    padding: 0 20px 0;
}
</style>